<template>
  <view class="page">
    <view class="p-body" v-if="success">
      <u-icon name="checkmark-circle-fill" size="120rpx" color="#3BA199" />
      <u-text :text="msg" color="#3BA199" size="40rpx" bold align="center" />
      <view class="p-btn" @click="handleTo">返回首页</view>
    </view>
    <view class="p-body" v-if="fail">
      <u-icon name="close-circle-fill" size="120rpx" color="#9e9e9e" />
      <u-text :text="msg" color="#9e9e9e" size="40rpx" bold align="center" />
      <view class="p-btn" @click="scanAgain">重新扫码</view>
    </view>
  </view>
</template>
<script>
import { orderConfirm } from "@/request/api.js";
export default {
  data() {
    return {
      success: false, // 核销成功
      fail: false, // 核销失败
      msg: "", // 核销结果
    };
  },
  onLoad(e) {
    this.handleScan(e.id, e.codes);
  },
  methods: {
    // 处理扫码
    handleScan(id, codes) {
      let data = {
        token: uni.getStorageSync("TOKEN"),
        id,
        codes,
      };
      orderConfirm(data).then((res) => {
        this.msg = res.msg;
        if (res.code == 1) {
          this.success = true;
        } else {
          this.fail = true;
        }
      });
    },
    // 重新扫码
    scanAgain() {
      uni.scanCode({
        scanType: ["qrCode"],
        success: (res) => {
          let { id, codes } = JSON.parse(res.result);
          this.handleScan(id, codes);
        },
        fail: () => {
          this.msg = "扫码失败";
        },
      });
    },
    // 返回首页
    handleTo() {
      uni.switchTab({ url: "/pages/record/index" });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .p-body {
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 220rpx;
    .p-btn {
      width: 376rpx;
      height: 88rpx;
      margin-top: 60rpx;
      line-height: 88rpx;
      background-color: #fff;
      border: 1rpx solid $active-color;
      border-radius: 120rpx;
      text-align: center;
      font-size: 28rpx;
      color: $active-color;
      &:active {
        background-color: #f9fffe;
      }
    }
  }
}
</style>
